<template>
  <div class="list">
    <NavbarIndex msg="Welcome to Your Vue.js App"/>
    <b-container>
      <b-breadcrumb :items="items" class="mt-3" />
      <b-row>
        <div class="col-md-12 col-lg-8">
              <router-link v-for="item in newsList" :key="item.id" :to="'/show/'+ item.id" :title="item.title">
                <div class="text-left py-2 border-bottom">
                  <h5 class="mt-0 text-dark">{{item.title}}</h5>
                  <b-media>
                    <b-img slot="aside" width="120" height="90" :src="'http://www.xinde.org'+ item.thumb" :alt="item.title" v-if="item.thumb" />
                    <small class="text-muted">{{item.inputtime}}</small>
                    <p class="text-truncate-3 mb-0 text-muted">{{item.description}}</p>
                  </b-media>
                </div>
              </router-link>
          <b-pagination size="md" :total-rows="total" v-model="page" :per-page="limit"></b-pagination>
        </div>
        <div class="col-md-12 col-lg-4">
          <RankRight msg="Welcome to Your Vue.js App" />
        </div>
      </b-row>
    </b-container>
  </div>
</template>

<script>
// @ is an alias to /src
import RankRight from "@/components/RankRight.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
export default {
  name: "home",
  components: {
    NavbarIndex,
    RankRight
  },
  data () {
    return {
      newsList: [],
      listUrl: '/api/index/getList',
      totalUrl: '/api/index/getListTotal',
      defaultPage: 0,
      total: 9999,
      limit: 10,
      items: [
        {
          text: "首页",
          to: "/"
        },
        {
          text: "新闻",
          to: "/about"
        },
        {
          text: "国内新闻",
          active: true
        }
      ]
    };
  },
  computed: {
    catid () {
      return this.$route.params.id
    },
    page: {
      get () {
        return this.defaultPage
      },
      set (val) {
        if (val == 0) {
          this.defaultPage = Number.parseInt(this.$route.params.page) || 1
        } else {
          this.defaultPage = val
        }
      }
    }
  },
  created () {
    this.page = 0;
    this.axios.post(this.totalUrl, { catid: this.catid }).then(ret => { this.total = ret.data.total })
  },
  mounted () {
    //this.get_list();
  },
  watch: {
    page: function () {
      this.$router.replace({ name: 'list', params: { id: this.catid, page: this.page } })
      this.get_list();
    }
  },
  methods: {
    get_list () {
      let that = this
      this.axios.post(this.listUrl, {
        catid: that.catid,
        page: that.page,
        limit: that.limit
      }).then(function (res) {
        that.newsList = res.data.list
      }).catch(function (error) {
        console.log(error)
      });
    }
  }
};
</script>

<style scoped>
.text-truncate-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
